<template>
     <div class="rolesM">
         <el-card>
         <el-button type="primary" @click="dialogAddVisible=true">添加角色</el-button>
           <el-table
         :data="rolesList"
        border>
     <el-table-column
      type="expand">
      <template slot-scope="scope"> 
      <div class="box" v-for="(v,i) in scope.row.children" :key="v.id" :class="{border_bo_none:i!=scope.row.children.length-1}">
        <div class="box-left">
        <el-tag
          effect="dark"
          closable
          @close="delrolesrights(scope.row.id,v.id)">
          {{v.authName}}
       </el-tag>
        </div>
        <div class="box-right">
        <div class="box-right-item" v-for="(vv,ii) in v.children" :key="vv.id">
        <div class="box-right-item-left" :class="{border_bo_none:ii==v.children.length-1}">
         <el-tag
          effect="dark"
          closable
          type="success"
          @close="delrolesrights(scope.row.id,vv.id)">
          {{vv.authName}}
       </el-tag>
        </div>
        <div class="box-right-item-right"  :class="{border_bo_none:iii==vv.children.length-1}">
        <el-tag
        v-for="(vvv,iii) in vv.children" :key="iii"
          effect="dark"
          closable
          type="warning"
          @close="delrolesrights(scope.row.id,vvv.id)">   
          {{vvv.authName}}
       </el-tag>
        </div>
        </div>
        </div>
      </div>
      </template>
    </el-table-column>
    <el-table-column
     type="index"
      label="#">
    </el-table-column>
    <el-table-column
      prop="roleName"
      label="角色名称">
    </el-table-column>
    <el-table-column
      prop="roleDesc"
      label="角色描述">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="300px">
      <template slot-scope="scope">
        <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row)">编辑</el-button>
<el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.row.id)">删除</el-button>
<el-button type="warning" icon="el-icon-setting" size="mini" @click="fpqx(scope.row)">分配权限</el-button>
      </template>
    </el-table-column>
  </el-table>
         </el-card>
         <!-- 弹框 -->
  <el-dialog
  title="添加角色"
  :visible.sync="dialogAddVisible"
  width="30%"
  >
 <el-form :model="ruleForm5" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="角色名称" prop="roleName">
    <el-input v-model="ruleForm5.roleName"></el-input>
  </el-form-item>
   <el-form-item label="角色描述">
    <el-input v-model="ruleForm5.roleDesc"></el-input>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="resetForm('ruleForm')">取 消</el-button>
    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
  </span>
</el-dialog>
 <!-- 编辑弹框 -->
  <el-dialog
  title="编辑角色"
  :visible.sync="dialogEditVisible"
  width="30%"
  >
 <el-form :model="ruleForm6" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="角色名称" prop="roleName">
    <el-input v-model="ruleForm6.roleName"></el-input>
  </el-form-item>
   <el-form-item label="角色描述" prop="roleDesc">
    <el-input v-model="ruleForm6.roleDesc"></el-input>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="resetForm('ruleForm')">取 消</el-button>
    <el-button type="primary" @click="submitEditForm('ruleForm')">确 定</el-button>
  </span>
</el-dialog>
 <!-- 分配权限 -->
<el-dialog title="分配权限" :visible.sync="dialogTableVisible">
   <el-tree
   show-checkbox
  :data="qxList"
  node-key="id"
  default-expand-all
  :default-checked-keys="getCheckIdList"
  :props="defaultProps"
  ref="rightsTree">
</el-tree>
<div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="setRightsFnOK()"
          >确 定</el-button>
      </div>
</el-dialog>
     </div>
</template>
<script>
import { rolesM, rolesAdd, del, editid,delrolesrights,shuo } from "@/http/roles.js";
import { allRight } from "@/http/rights.js";
export default {
  data() {
    return {
      roleId:"",
      index:0,
      dialogEditVisible: false,
      getCheckIdList: [],
      defaultProps: {
        children: "children",
        label: "authName"
      },
      qxList: [],
      dialogTableVisible: false,
      rolesList: [],
      dialogAddVisible: false,
      ruleForm5: {
        roleName: "",
        roleDesc: ""
      },
      ruleForm6: {
        roleName: "",
        roleDesc: ""
      },
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" }
        ],
        roleDesc: [
          { required: true, message: "请输入角色描述", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getrolesM();
  },
  methods: {
    async delrolesrights(roleId, rightId){
     console.log(roleId, rightId);
     let res=await delrolesrights(roleId, rightId)
     let index=this.rolesList.findIndex(v=>v.id==roleId)
     this.rolesList[index].children=res.data
    },
   async setRightsFnOK(){
    //  console.log("点击了确定按钮");
    //  console.log("roleId",this.roleId);
    //  console.log(this.$refs.rightsTree.getCheckedKeys());
    //  console.log(this.$refs.rightsTree.getHalfCheckedKeys());
      var rids=[...this.$refs.rightsTree.getCheckedKeys(),...this.$refs.rightsTree.getHalfCheckedKeys()].join(",")
      console.log(rids);

      let res = await shuo(this.roleId,{rids})
      console.log(res);
      this.dialogTableVisible=false
      this.getrolesM()
    },
    // 删除
    async del(id) {
      let res = await del(id);
      this.getrolesM();
    },
    // 添加角色
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          let res = await rolesAdd(this.ruleForm5);
          console.log(res);
          this.getrolesM();
          this.dialogAddVisible = false;
          this.ruleForm5 = {};
        }
      });
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 获取角色
    async getrolesM() {
      let res = await rolesM();
      console.log(res);
      this.rolesList = res.data;
    },
    // 角色分配
    async fpqx(row) {
      this.dialogTableVisible = true;
      let res = await allRight("tree");
      console.log(res);
      this.qxList = res.data;
      this.getCheckIdList = [];
      this.getCheckId(row, this.getCheckIdList);
      this.roleId=row.id
    },
    // 递归调用
    getCheckId(row, arr) {
      if (!row.children) {
        arr.push(row.id);
      } else {
        row.children.forEach(v => this.getCheckId(v, arr));
      }
    },
    // 编辑角色
    edit(row) {
      this.index=row.id
    //   console.log(row);
      console.log(this.index);
      this.dialogEditVisible=true
      this.ruleForm6.roleName=row.roleName
      this.ruleForm6.roleDesc=row.roleDesc
    },
    submitEditForm(formName){
      this.$refs[formName].validate(async valid => {
        if (valid) {
          let res = await editid(this.index,this.ruleForm6);
          console.log(res);
          this.getrolesM();
          this.dialogEditVisible = false;
        //   this.ruleForm6 = {};
        }
      });
    }
  }
};
</script>
<style lang="scss">
.box {
  width: 100%;
  display: flex;
  border: 1px solid #333;
}
.box-left {
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #333;
}
.box-right {
  flex: 1;
}
.box-right-item {
  display: flex;
}
.box-right-item-left {
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
}
.box-right-item-right {
  flex: 1;
  border-bottom: 1px solid #333;
}
.border_bo_none {
  border-bottom: none;
}
.el-tag {
  margin: 10px;
}
</style>


